<template>
    <div v-loading="dataLoading" class="role-user">
        <div class="email">
            <div>Email Address</div>
            <el-input v-if="showUser" style="flex: 1;" :disabled="showUser" v-model="email1"
                placeholder="please input email..." size="small"></el-input>
            <el-select v-else v-model="email2" value-key="user" :reserve-keyword="false" style="flex:1;" multiple
                placeholder="please input email..." size="small" filterable remote :remote-method="suggestSearch"
                :loading="emailLoading" default-first-option>
                <el-option v-for="item in options" :key="item.email" :label="item.email" :value="item"></el-option>
            </el-select>
        </div>
        <div class="transfer">
            <el-transfer v-model="selectedData" style="display:flex" filterable :titles="['权限列表', '我的权限']" :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
            }" :data="sourceData"></el-transfer>
        </div>
        <div class="dialog-footer">
            <el-button class="bg-white bg-100" @click="close(false)">Cancel</el-button>
            <el-button class="bg-black bg-100" :disabled="subLoading || (!showUser && email2.length === 0)"
                @click="confirm">Ok</el-button>
        </div>
    </div>
</template>
<script  >
import { defineComponent, ref, reactive, onUnmounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios'
export default defineComponent({
    name: 'RoleUser',
    props: {
        showUser: {
            type: Boolean,
            default: false
        },
        user: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    emits: ['closeAddDialog'],
    setup(props, { emit }) {
        const { showUser, user } = props;
        let dataLoading = ref(false);
        let emailLoading = ref(false);
        let subLoading = ref(false);
        let email1 = ref('')
        let email2 = ref('')
        let options = ref([])
        let sourceData = ref([]);
        let selectedData = ref([]);
        let timeout = ref(null);
        let cancelToken = reactive({ cancel: null });
        let suggestSearchRes = ref(null);


        const getRole = async () => {
            dataLoading.value = true;
            let res = await getRoleList(1);
            if (res.code === 200) {
                let roles = res.data.map(item => {
                    return {
                        ...item,
                        label: item.roleName,
                        key: item.id
                    }
                })
                sourceData.value = roles;
            }
            if (showUser) {
                await getCurrentRole();
            }
            dataLoading.value = false;
        }

        const getCurrentRole = async () => {
            let res = await getRoleList(2);
            if (res.code === 200) {
                let roles = res.data;
                selectedData.value = roles.map(item => item.id)
            }
        }

        const suggestSearch = (str) => {
            clearTimeout(timeout.value);
            emailLoading.value = false;
            if (str === '') {
                options.value = [];
                return;
            }
            emailLoading.value = true;
            options.value = [];
            if (!!suggestSearchRes.value) {
                cancelToken.cancel()
            }
            timeout.value = setTimeout(() => {
                getSuggestion();
                clearTimeout(timeout.value);
            }, 500)
        }
        const getSuggestion = async () => {
            let CancelToken = axios.CancelToken;
            let cancelTokenConfig = {
                cancelToken: new CancelToken(function excutor(c) {
                    cancelToken.cancel = c;
                })
            }
            const res = await getRoleList(3);
            options.value = [];
            emailLoading.value = false;
            suggestSearchRes.value = res;
            if (!res) return;
            if (res.code === 200) {
                options.value = res.data;
            }
        }
        const close = (reload) => {
            emit('closeAddDialog', reload)

        }
        const confirm = () => {
            ElMessageBox.confirm('确定将已选择权限列表作为该用户的最终吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                center: true,
                confirmButtonClass: 'bg-blue',
                cancelButtonClass: 'bg-black'
            }).then(async => {
                subLoading.value = true
                if (showUser) {

                } else {

                }
                subLoading.valel = false
                ElMessage.success({
                    message: '已添加该用户配置',
                    duration: 3000,
                    onClose: () => {
                        emit('userClose', 2)
                    }
                })
            }).catch(e => { })
        }

        const getRoleList = (type) => {
            let arr = [];
            if (type === 1) {
                arr = {
                    data: [
                        {
                            id: 1,
                            roleName: '操作用户',
                        },
                        {
                            id: 2,
                            roleName: '删除用户',
                        },
                        {
                            id: 3,
                            roleName: '拒绝用户',
                        },
                        {
                            id: 4,
                            roleName: '可行用户',
                        },
                        {
                            id: 5,
                            roleName: '测试用户',
                        },
                        {
                            id: 6,
                            roleName: '共识用户',
                        },],
                    code: 200
                }
            } else if (type == 2) {
                arr = {
                    data: [
                        {
                            id: 1,
                            roleName: '操作用户',
                        },
                        {
                            id: 2,
                            roleName: '删除用户',
                        },
                        {
                            id: 6,
                            roleName: '共识用户',
                        },],
                    code: 200
                }
            } else {
                arr = {
                    data: [
                        {
                            email: '操作用户',
                            value: 123
                        },
                        {
                            email: '删除用户',
                            value: 456
                        },
                        {
                            email: '拒绝用户',
                            value: 789
                        },
                        {
                            email: '可行用户',
                            value: 1234
                        },
                        {
                            email: '测试用户',
                            value: 12396
                        },
                        {
                            email: '共识用户',
                            value: 1230
                        },
                    ],
                    code: 200
                }
            }
            return arr
        }

        onUnmounted(() => {
            timeout.value = null;
        })

        return {
            loading,
            template,
            username,
            selectLoaidng,
            options,
            selectedData,
            sourceData,
            type,
            suggestSearch,
            close,
            confirm
        }
    }
})
</script>
<style lang="scss" scoped>
.role-user {
    height: 100%;
}

.email {
    display: flex;
    margin: 0 auto;

    div:nth-child(1) {
        margin-right: 15px;
    }
}

.transfer {
    height: calc(100% - 102px);
}

:deep(.el-transfer) {
    height: 100%;
}

:deep(.el-transfer-panel__body) {
    height: calc(100% - 30px);
}

:deep(.el-checkbox-group) {
    height: calc(100% - 56px);
    overflow: auto;
    padding: 0;
}

.dialog-footer {
    margin: 15px auto;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
</style>